<template>
  <div style="height: 600px;width: 100%;">
    <div style="height: 100px;width: 100%;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>远程密码查询页面</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <div style="height: 300px;width: 100%;">
      <div style="height: 80%;width: 100%;float: left">
        <el-form label-width="120px" :model="DataForm" ref="DataForm" :rules="rules">
          <el-form-item label="主键" prop="id" v-show="false">
            <el-input readonly size="small" v-model="DataForm.bid" auto-complete="off" placeholder="请输入主键"></el-input>
          </el-form-item>
          <el-form-item label="远程IP地址" prop="remoteAddress">
            <el-input readonly size="small" v-model="DataForm.remoteAddress" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="hostPwd">
            <el-input readonly size="small" v-model="DataForm.hostPwd" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item label="是否空闲" prop="isonline">
            <el-switch disabled v-model="DataForm.isonline" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<!--            <el-input readonly size="small" v-model="DataForm.isonline" auto-complete="off" placeholder="请输入报销人"></el-input>-->
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import {
  ippasswordList
} from '../../api/userMG'

export default {
  data() {
    return {
      loading: false, //是显示加载
      DataForm: {
        id:'',
        remoteAddress:'',
        hostPwd:'',
        isonline:'',
        hostAddress:'',
      },

      headers: {
        token: localStorage.getItem('token'),
      },
    };
  },
  created() {
    this.DataForm.id = this.$route.params.id;
    if(this.DataForm.id != undefined && this.DataForm.id != 'undefined' ){
      this.getdata(this.DataForm);
    }else {
      this.$router.push({ name: 'ipmessage' });//跳转到查询界面
    }
  },

  methods: {
    closeDialog(obj){
      this.$router.push({ name: 'ipmessage' });//跳转到查询界面
    },
    getdata(parameter) {
      ippasswordList(parameter)
        .then(res => {
          this.loading = false
          console.log(res)
          if(res.code==null){
            this.$router.push({ name: 'login' });//跳转到查询界面
          }
          if (res.code!=0) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.loading = false
            this.DataForm.remoteAddress = res.data.remoteAddress;
            this.DataForm.hostPwd = res.data.hostPwd;
            this.DataForm.isonline = res.data.isonline ===0?true:false;
            this.DataForm.hostAddress = res.data.hostAddress;
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取数据失败，请稍后再试！')
        })
    },
  }
};
</script>
<style scoped>
.avatar-upload {
  width: 100px; /* 你可以根据需要调整这个值 */
  height: 100px; /* 你可以根据需要调整这个值 */
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* 隐藏超出容器的内容 */
  position: relative;
  cursor: pointer;
}
.avatar-uploader {
  width: 800px; /* 你可以根据需要调整这个值 */
  height: 600px; /* 你可以根据需要调整这个值 */
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* 隐藏超出容器的内容 */
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 800px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-preview {
  max-width: 800px; /* 图片最大宽度为容器宽度 */
  max-height: 600px; /* 图片最大高度为容器高度 */
  object-fit: cover; /* 保持图片比例，同时填充整个容器 */
}

.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
